<template>
    <div>
        <el-row class="tac">
            <el-col :span="24">
              <el-menu
                default-active="2"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose">
                <el-submenu v-for="(chapter, i) in chapterList" :key="i" :index="i.toString()">
                  <template slot="title">
                    <i class="el-icon-location"></i>
                    <span style="font-weight: bold;">章节 {{i + 1}}：</span><span>{{chapter.title}}</span>
                  </template>
                  <el-menu-item-group>
                    <el-menu-item v-for="(video, i) in chapter.videoList" :key="video.vedioId" index="i.toString()">
                        视频 {{i + 1}}：{{video.title}}
                        <i class="el-icon-delete" style="position: relative; right: -30px;"></i>
                    </el-menu-item>
                    <el-menu-item index="chapter.videoList.length" style="height: 280px;">
                        <span>视频 {{chapter.videoList.length + 1}}：待添加</span>
                        <el-upload
                            :on-success="handleVodUploadSuccess"
                            :on-remove="handleVodRemove"
                            :before-remove="beforeVodRemove"
                            :on-exceed="handleVodUploadSuccess"
                            :file-list="fileList"
                            :limit="1"
                            :before-upload="beforeUpload"
                            accept=".mp4,.avi"
                            class="upload-demo"
                            drag
                            action="http://10.136.33.128:3000/eduvod/video/uploadAliyunVideo"
                            multiple
                        >
                            <i class="el-icon-upload"></i>
                            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                        </el-upload>
                    </el-menu-item>
                  </el-menu-item-group>
                </el-submenu>
              </el-menu>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    name: 'VideoManage',
    data() {
        return {
            fileList: [],
            video: {
                title: '',
                sort: 0,
                free: 0,
                videoSourceId: '',
                videoOriginalName: ''//视频名称
            },
            chapterList: [
                {
                    title: "学习如何使用 Java",
                    videoList: [
                        {
                            title: "学习 for 循环",
                            vedioId: "000000"
                        },
                        {
                            title: "学习 while 循环",
                            vedioId: "000001"
                        }
                    ]
                },
                {
                    title: "学习如何使用 C++",
                    videoList: [
                        {
                            title: "学习 for 循环",
                            vedioId: "000002"
                        },
                        {
                            title: "学习 while 循环",
                            vedioId: "000003"
                        }
                    ]
                }
            ],
        }
    },
    methods:{
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        },
        beforeUpload(file){
            console.log(file)
            var testmsg=file.name.substring(file.name.lastIndexOf('.')+1)
            const extension = testmsg === 'mp4'
            const extension2 = testmsg === 'avi'
            // const isLt2M = file.size / 1024 / 1024 < 10
            if(!extension && !extension2) {
                this.$message({
                    message: '上传文件只能是视频文件!',
                    type: 'warning'
                });
            }
            // if(!isLt2M) {
            //     this.$message({
            //         message: '上传文件大小不能超过 10MB!',
            //         type: 'warning'
            //     });
            // }
            // return (extension || extension2) && isLt2M
            return true
        },
        //点击确定调用的方法
        handleVodRemove() {
            //调用接口的删除视频的方法
            video.deleteAliyunvod(this.video.videoSourceId)
                .then(response => {
                    //提示信息
                    this.$message({
                        type: 'success',
                        message: '删除视频成功!'
                    });
                    //把文件列表清空
                    this.fileList = []
                    //把video视频id和视频名称值清空
                    //上传视频id赋值
                    this.video.videoSourceId = ''
                    //上传视频名称赋值
                    this.video.videoOriginalName = ''
                })
        },
        //点击×调用这个方法
        beforeVodRemove(file,fileList) {
            return this.$confirm(`确定移除 ${ file.name }？`);
        },
        handleUploadExceed() {
            this.$message.warning('想要重新上传视频，请先删除已上传的视频')
        },
        //上传视频成功调用的方法
        handleVodUploadSuccess(response, file, fileList) {
            console.log('handleVodUploadSuccess:', response)
            //上传视频id赋值
            this.video.videoSourceId = response.data.videoId
            //上传视频名称赋值
            this.video.videoOriginalName = file.name
            console.log('handleVodUploadSuccess')
        }
    }
}
</script>

<style scoped>
    .el-menu-item.is-active {
        background-color: white !important;
    }
    .el-menu-item:hover {
        background-color: white !important;
    }
</style>